import React, { useState } from 'react'
import style from './index.module.css'
import { useNavigate } from 'react-router-dom'
import MessageAlert from '@/components/MessageAlert'
import { login } from '@/api/user'
import { message } from 'antd'
export default function Login() {
  const navigate = useNavigate()
  const [loginSuccess, setLoginSuccess] = useState(false) // 控制登录成功动画
  const [userRule, setUserRule] = useState({
    message: '',
    isShow: false
  }) // 账号tips
  const [passWordRule, setpassWordRule] = useState({
    message: '',
    isShow: false
  }) // 密码tips
  const [userName, setuserName] = useState('admin')
  const [pssWord, setpssWord] = useState('123456')
  // 点了登录
  const loginHandel = async () => {
    userLoginRef()
    passWordLoginRef()
    if (userLoginRef() && passWordLoginRef()) {
      doLogin(() => {
        setLoginSuccess(true) // 动画
        setTimeout(() => {
          navigate('/home')
        }, 1500)

      })
    }
  }
  const userLoginRef = () => {
    if (userName.trim() === '') {
      setUserRule({
        isShow: true,
        message: '请输入账号'
      })
      return false
    } else {
      setUserRule({
        isShow: false
      })
      return true
    }


  }
  const passWordLoginRef = () => {
    if (pssWord.trim() === '') {
      setpassWordRule({
        isShow: true,
        message: '请输入密码'
      })
      return false
    } else {
      setpassWordRule({
        isShow: false
      })
      return true
    }
  }
  // 登录
  const doLogin = async (callback) => {
    const { data } = await login({
      username: userName,
      password: pssWord,
      roleState: true,
      _expand: 'role'
    })
    console.log(typeof data[0] == 'object')
    if (typeof data[0] == 'object') {
      callback()
      message.success('登录成功')
      sessionStorage.setItem('userInfo', JSON.stringify(data[0]))
      // 假的toke
      sessionStorage.setItem('token', 'yanyunqi')
    } else {
      message.error('用户不存在')
    }
  }

  return (
    <div className={style.box}>
      <div className={`${style.container} ${loginSuccess ? style.success : ''}`}>
        <h1>Welcome</h1>
        <div className={style.form}>
          <input
            className={userRule.isShow ? style['form-error'] : ''}
            type="text"
            placeholder="您的账号"
            value={userName}
            onChange={(e) => {
              setuserName(e.target.value)
            }}
            onBlur={() => userLoginRef()}
            onFocus={() => {
              setUserRule({
                isShow: false
              })
            }}
          />
          <div style={{ opacity: userRule.isShow ? 1 : 0, transition: 'opacity .3s' }}>
            <MessageAlert

              isShow={userRule.isShow}
              message={userRule.message} />
          </div>
          <input
            type="password"
            placeholder="您的密码"
            value={pssWord}
            className={`${userRule.isShow ? style['error-message'] : ''} 
            ${passWordRule.isShow ? style['form-error2'] : ''}`}
            onChange={(e) => {
              setpssWord(e.target.value)
            }}
            onBlur={() => passWordLoginRef()}
            onFocus={() => {
              setpassWordRule({
                isShow: false
              })
            }}
          />
          <div style={{ opacity: passWordRule.isShow ? 1 : 0, transition: 'opacity .3s' }}>
            <MessageAlert
              isShow={passWordRule.isShow}
              message={passWordRule.message}
              tips16={userRule.isShow ? true : false} />
          </div>
          <button
            className={`
            ${style['btn-login']} 
            ${userRule.isShow ? style['error-message'] : ''} 
            ${passWordRule.isShow ? style['error-button'] : ''} 
            ${userRule.isShow && passWordRule.isShow ? style['error-button20'] : ''}`}
            onClick={() => loginHandel()}
          >登录</button>
        </div>
      </div>
      <ul className={style['bg-squares']}>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  )
}
